<template>
  <div>
    <div class="incomebox flex aligncenter mb_20">
      <img src="@/assets/images/j_pic.png" alt="" class="l_img mr_15" />
      <div>
        <div class="c_fff f-14 mb_6">总充值金额（元）</div>
        <div class="c_fff fw f-24">{{all_score}}</div>
      </div>
    </div>
    <div class="bg_fff boxflex">
      <div class="flexrowbetween">
        <div class="flex f-16 c_000 aligncenter mb_20">
          <div class="line mr_10"></div>
          收入明细
        </div>
        <div class="flex aligncenter mb_10">
          <div
            v-for="(item, index) in days"
            :key="index"
            class="dataname f-14 commhover"
            :class="{ active: daynum == item.value }"
            @click="handleClick(item)"
          >
            {{ item.name }}
          </div>
          <el-date-picker
            class="mr_20"
            v-model="time"
            size="small"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
          >
          </el-date-picker>
          <el-button
            type="primary"
            class="exportbtn"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
      </div>
      <div class="">
        <el-table
          v-loading="loading"
          :data="tableData"
          ref="tablelayout"
          class="commtable"
        >
          <el-table-column
            align="center"
            label="时间"
            prop="create_time"
            min-width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center"
            label="拉取量"
            min-width="100"
            prop="user_login"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.get_num }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="曝光量"
            prop="mobile"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.click_num }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="曝光率%"
            prop="mobile"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.click_rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="点击量"
            prop="email"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.click_num }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="点击率（%）"
            prop="last_login_time"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.click_rate }} %
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="ecpm"
            min-width="200"
            prop="create_time"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.ecmp_num }}
            </template>
          </el-table-column>
          <el-table-column
            label="结算收入（元）"
            align="center"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.score }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.num"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { incomeIndex } from "@/api/shouyi";
import { time_date } from "@/utils/validate";
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
      },
      total: 0,
      all_score:0,
      days: [
        { name: "本周", value: 1 },
        { name: "本月15日", value: 2 },
        { name: "本月", value: 3 },
      ],
      daynum: 1,
      loading: false,
      tableData: [],
      time: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = { ...this.queryParams };
      if (this.time) {
        params.start = this.time[0];
        params.end = this.time[1];
      }
      if (this.daynum == 1) {
        params.start = this.parseTime(time_date(7).start, "{y}-{m}-{d}");
        params.end = this.parseTime(time_date(7).start, "{y}-{m}-{d}");
      }
      if (this.daynum == 2) {
        let startData = new Date()
        startData.setDate(1)
        let endData = new Date()
        endData.setDate(15)
        params.start = this.parseTime(startData, "{y}-{m}-{d}");
        params.end = this.parseTime(endData, "{y}-{m}-{d}");
      }
      if (this.daynum == 3) {
        params.start = this.parseTime(time_date(30).start, "{y}-{m}-{d}");
        params.end = this.parseTime(time_date(30).end, "{y}-{m}-{d}");
      }
      this.loading = true;
      incomeIndex(params)
        .then((res) => {
          this.all_score = res.data.all_score
          this.tableData = res.data.list.map((item) => {
            if(item.click_num==0){
              item.click_rate=0
            }else{
              item.click_rate = (Number(item.get_num)/Number(item.click_num)).toFixed(2) * 100;
            }
            console.log('click_rate',item.click_rate)
            if(item.get_num==0){
              item.ecmp_num = 0
            }else{
              item.ecmp_num = (Number(item.score) / Number(item.get_num)).toFixed(2) * 1000;
            }
            console.log('ecmp_num',item.ecmp_num)

            return item;
          });
          this.total = res.data.count;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    handleClick(num) {
      this.daynum = num.value;
      this.time = ''
      this.handleQuery();
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    changeTime(val) {
      if (val) {
        this.daynum = "";
      } else {
        this.daynum = 1;
      }
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.incomebox {
  width: 100%;
  height: 95px;
  padding: 0 30px;
  background: url("~@/assets/images/fin_bg.png") 100% 100% no-repeat;
  background-size: cover;
}
.l_img {
  width: 62px;
  height: 55px;
}
.boxflex {
  padding: 16px 20px;
  .line {
    width: 2px;
    height: 18px;
    background-color: #1670f1;
  }
}
.dataname {
  margin-right: 22px;
  color: #8e8e8e;
  position: relative;
  &.active {
    color: #000;
  }
  &.active::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 2px;
    background-color: #1670f1;
    bottom: -6px;
    left: 0;
  }
}
</style>
